
import React, { Component } from 'react';// 各种包一定要注意导入
import {
    Platform,
    StyleSheet,
    Text,
    View,
    NativeModules,
    ScrollView,
    Image,
    TouchableOpacity
} from 'react-native';

import Slider from '../../com/Slider';




const Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

class Home_01 extends Component {


    constructor(props) {
        super(props);
    }

    static navigationOptions = {
        headerTitle: 'ViewTow'
    }


    _toShowDetails() {
        console.log(0);
        console.log(this.props);
        //this.props.navigation.navigate("Home_06")
    }



    render() {

        return (
            <View style={styles.appContainer}>

                <ScrollView>
                    <View style={styles.sliderContainer}>
                        <Slider />
                    </View>

                    <View style={styles.categoryNavWrap}>

                        <View style={styles.categoryNavEach}>

                            <Image style={[styles.categoryNavEachImg]} source={require('../../imgs/unchecked.png')} />
                            <Text style={[styles.categoryTitle]}>分类</Text>

                        </View>

                        <View style={styles.categoryNavEach}>

                            <Image style={[styles.categoryNavEachImg]} source={require('../../imgs/unchecked.png')} />
                            <Text style={[styles.categoryTitle]}>分类</Text>

                        </View>
                        <View style={styles.categoryNavEach}>

                            <Image style={[styles.categoryNavEachImg]} source={require('../../imgs/unchecked.png')} />
                            <Text style={[styles.categoryTitle]}>分类</Text>

                        </View>
                        <View style={styles.categoryNavEach}>

                            <Image style={[styles.categoryNavEachImg]} source={require('../../imgs/unchecked.png')} />
                            <Text style={[styles.categoryTitle]}>分类</Text>

                        </View>
                    </View>

                    <View style={[styles.home_card, styles.mt_10]}>
                        <View style={[styles.home_card_header]}>


                        </View>
                        <View style={[styles.home_card_body]}>

                            <TouchableOpacity
                                onPress={this._toShowDetails}
                            >

                                <View style={[styles.xsEachWrap]} >


                                    <View style={[styles.xsEachImgWrap]}>
                                        <Image style={[styles.xsEachImg]} source={{ uri: 'http://res.cjzww.com/image/book/cover/6/99/69970.jpg' }} ></Image>
                                    </View>

                                    <View style={[styles.xsEachTitleWrap]}>
                                        <Text style={[styles.xsEachTitle]}>医道妃途：摄政王的百变宠妃</Text>
                                    </View>


                                </View>
                            </TouchableOpacity>
                            <View style={[styles.xsEachWrap]}>



                            </View>
                            <View style={[styles.xsEachWrap]}>



                            </View>
                            <View style={[styles.xsEachWrap]}>



                            </View>

                            <View style={[styles.xsEachWrap]}>



                            </View>
                            <View style={[styles.xsEachWrap]}>



                            </View>
                            <View style={[styles.xsEachWrap]}>



                            </View>
                            <View style={[styles.xsEachWrap]}>



                            </View>

                        </View>
                    </View>

                </ScrollView>

            </View>
        );
    }


}

const styles = StyleSheet.create({
    appContainer: {
        backgroundColor: '#f2f2f2'
    },
    sliderContainer: {
        height: height / 640 * 128,
        width: width,
        backgroundColor: 'blue'
    },
    categoryNavWrap: {
        height: width / 4,
        flexDirection: 'row',
        borderColor: 'red',
        borderBottomWidth: 0.5,
        backgroundColor: 'red'
    },
    categoryNavEach: {
        flex: 1,
        height: width / 4,
        backgroundColor: 'white',
        marginLeft: 0.5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    categoryNavEachImg: {

        width: width / 4 * 0.4,
        height: width / 4 * 0.4
    },
    categoryTitle: {
        color: '#666',
        paddingTop: 6,
        fontSize: 10,
        height: 20
    },
    mt_20: {
        marginTop: 20
    },
    mt_10: {
        marginTop: 10
    },
    home_card:
    {
        backgroundColor: 'white'
    },
    home_card_header:
    {
        height: 40,
        backgroundColor: 'white',
        borderBottomWidth: 0.5,
        borderColor: '#eee'
    },
    home_card_body:
    {
        backgroundColor: 'white',
        marginHorizontal: 4,
        marginTop: 4,
        marginBottom: 4,
        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'center'
    },
    xsEachWrap: {
        width: (width - 40) / 4,
        borderColor: 'red',
        borderWidth: 0.5,
        height: (width - 40) / 4 * 1.4,
        marginHorizontal: 4,
        marginTop: 8
    },
    xsEachTitle: {
        fontSize: 10
    },
    xsEachTitleWrap: {
        height: 20,
        fontSize: 10,
        justifyContent: 'center'
    },
    xsEachImgWrap: {
        flex: 1,
        backgroundColor: "green",
    },
    xsEachImg: {
        flex: 1,
        resizeMode: 'cover'

    },
    fdr: {
        flexDirection: 'row'
    }
});

export default Home_01;